body{
  box-pack:center;
  box-align:center;
  perspective: 2000px;
}
#img_group{
  width: 400px;
  height: 400px;
  margin: 10% auto;
  transform-style: preserve-3d;
  animation: move 15s linear infinite;
}

.img_out{
  position: absolute;
  width: 400px;
  height: 400px;

}

.img_out:after, .img_out:before {
  content: '';
  width: 402px;
  height: 402px;
  box-sizing: border-box;
  /*border-radius: 15px;*/
  border: 2px solid red;
  position: absolute;
  /*top: -5%;*/
  /*left: -5%;*/
  /*animation: bo3DBorder 6s linear infinite;*/
}

#img_group>img{
  opacity: 50%;
}

.img_out_front{
  transform: translateZ(200px) ;

}
.img_out_back{
  transform: translateZ(-200px) ;
}
.img_out_left{
  transform: translatex(-200px) rotatey(90deg);
}
.img_out_right{
  transform: translatex(200px) rotatey(90deg);
}
.img_out_above{
  transform: translatey(200px) rotatex(90deg);
}
.img_out_bottom{
  transform: translatey(-200px) rotatex(90deg);
}


@keyframes move {

  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

@keyframes bo3DBorder {
  0% {
    border-color: #fff;
    clip: rect(0, 220px, 2px, 0);
  }

  25% {
    border-color: yellow;
    clip: rect(0px, 2px, 220px, 0)
  }

  50% {
    border-color: blue;
    clip: rect(218px, 220px, 220px, 0)
  }

  75% {
    border-color: green;
    clip: rect(0, 220px, 220px, 218px)
  }

  100% {
    border-color: #ef0909;
    clip: rect(0, 220px, 2px, 0)
  }
}